<template>
  <div class="tabs betweenbox full">
    <div class="tabs-item  centerbox"
         @click="clickEvent(item)"
         v-for="(item,index) in tabsDataList"
         :class="{'tabs-active':item.active}"
         :key="index">{{item.name}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface tabItem {
  id: string;
  name: string;
  active: Boolean;
}
@Component
export default class extends Vue {
  // tabs数据集合
  tabsDataList: tabItem[] = [
    {
      id: "sbqj",
      name: "设备全景",
      active: true
    },
    {
      id: "ssjc",
      name: "实时监视",
      active: false
    },
    {
      id: "jqr",
      name: "机器人",
      active: false
    },
  ];
  //点击事件
  clickEvent(item: tabItem): void {
    this.tabsDataList.forEach(v => {
      v.active = false;
    });
    item.active = true;
    this.$emit('clickEvent',item.id)
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  &-item {
    border-right: 1px #0276c0 solid;
    border-bottom: 1px #0276c0 solid;
    flex: 1;
    box-sizing: border-box;
    cursor: pointer;
    color: #97989c;
    transition: all 800ms;
  }
  &-item:last-child {
    border-right: none;
  }
  &-active {
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(3, 92, 255, 0) 0%,
      rgba(3, 92, 255, 1) 24%,
      rgba(3, 92, 255, 1) 47%,
      rgba(3, 92, 255, 0.9) 49%,
      rgba(3, 92, 255, 1) 79%,
      rgba(3, 92, 255, 0) 100%
    );
  }
}
</style>

